<template>
  <div class="base-navbar">
    <van-nav-bar
      fixed
      placeholder
      :title="title"
      :left-text="leftText"
      :left-arrow="leftArrow"
      :right-text="rightText"
      @click-left="handleClickLeft"
      @click-right="onClickRight"
    >
      <div slot="title">
        <template v-if="$slots.default">
          <slot></slot>
        </template>
        <span v-else>{{ title }}</span>
      </div>
    </van-nav-bar>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String
    },
    leftArrow: {
      type: Boolean,
      default: true
    },
    leftText: {
      type: String,
      default: ''
    },
    rightText: {
      type: String,
      default: ''
    },
    onClickLeft: {
      type: Function
    },
    onClickRight: {
      type: Function,
      default: () => {}
    }
  },
  methods: {
    handleClickLeft() {
      this.onClickLeft ? this.onClickLeft() : this.$router.go(-1)
    }
  }
}
</script>

<style lang="scss" scoped>
.base-navbar {
  ::v-deep .van-nav-bar {
    background-color: #eee;
    .van-nav-bar__text,
    .van-icon {
      color: #fff;
    }
    .van-nav-bar__title {
      flex: 1;
      color: #fff;
      font-size: 14px;
    }
    .van-nav-bar__left,
    .van-nav-bar__right {
      padding: 0 8px;
    }
  }
}
</style>
